<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font_uuvtyvp8x4/iconfont.css">
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .top {
        display: inline-flex;
        text-align: center;
        width: 100%;
        justify-content: center;
        border-bottom: 1px solid #cccccccc;
    }

    .iconfont {
        font-size: 2.5rem;
    }

    .iconfont::before {
        margin-top: 5px;
        position: absolute;
        margin-left: -40px;
    }

    .firm {
        width: 240px;
        height: 50px;
        color: #ff6000;
        border-bottom: 1px solid #ff6000;
        cursor: pointer;
    }

    .person {
        width: 240px;
        height: 50px;
        /* border-bottom: 1px solid green; */
        cursor: pointer;
    }

    p {
        font-size: 12px;
        text-align: center;
        font-weight: 700;
    }

    input:focus {
        outline: none;
        border: 1px solid #ff6000;
    }

    label::before {
        content: '*';
        color: red;
    }

    .main1 {
        position: absolute;
        top: 15%;
        left: 40%;
    }

    input {
        font-size: 14px;
        margin-bottom: 20px;
        width: 250px;
        height: 40px;
        padding-left: 10px;
    }

    .select {
        width: 20px;
        height: 20px;
    }

    #select {
        width: 365px;
        display: inline-flex;
        justify-content: space-evenly;
    }

    #submit {
        display: block;
        width: 120px;
        height: 40px;
        position: absolute;
        left: 40%;
        padding-right: 10px;
        background-color: #ff6000;
        color: white;
        border: 1px solid #ff6000;
    }

    .main2 {
        position: absolute;
        top: 15%;
        left: 40%;
    }

    .know {
        border: 1px solid #cccccc;
        padding: 20px 20px 0 20px;
        width: 180px;
        position: fixed;
        left: 80%;
        top: 15%;
        font-size: 12px;
    }

    .know li {
        list-style: none;
        padding: 8px 0;
        border-bottom: 1px solid #ccc;
    }

    .know a {
        display: inline-flex;
        color: #999;
        text-decoration: none;
        width: 140px;
    }
</style>

<body>
    <div class="top">
        <div class="firm">
            <span class="iconfont icon-qiye"></span>
            企业账户注册
        </div>
        <div class="person">
            <span class="iconfont icon-geren"></span>
            个人账户注册
        </div>
    </div>
    <p>有企业营业执照（含个体工商户）的用户请注册。权益如下：做企业实名认证；作为卖家身份开店；作为买家身份采购。</p>
    <form class="main1" autocomplete="on" action="#" style="visibility: visible;">
        <label for="">会员名：<input type="text" name="vipname" id="vipname" placeholder="设置会员名" required></label>
        <br>
        <label for="" style="margin-left: -15px;">登录密码：<input type="password" name="psw1" placeholder="设置你的登录密码"
                autocomplete="off" required></label>
        <br>
        <label for="" style="margin-left: -15px;">密码确认：<input type="password" name="psw2" id=""
                placeholder="请再次输入你的登录密码" autocomplete="off" required></label>
        <br>
        <label for="" style="margin-left: -30px;">联系人姓名：<input type="text" name="relatename" id="" required
                autocomplete="off" placeholder="请输入真实姓名"></label>
        <br>
        <label for="" style="margin-left: -15px;">企业名称：<input type="text" name="firmname" id=""
                placeholder="请输入营业执照上的公司名称" required></label>
        <br>
        <label for="" id="select" style="margin-left: -20px;">
            贸易身份：
            <input type="radio" name="select" class="select" id="" checked>我要销售
            <input type="radio" name="select" class="select" id="">我要采购
            <input type="radio" name="select" class="select" id="">两者都是
        </label>
        <br>
        <label for="" style="margin-left: -20px;">
            手机号码：
            <input list="tel" style="width: 120px;"><input type="tel" name="tel" autocomplete="off"
                style="width: 120px;" required>
            <datalist id="tel">
                <option value="中国大陆  +98"></option>
                <option value="中国香港  +852"></option>
                <option value="中国澳门  +853"></option>
                <option value="中国西班牙 +351"></option>
                <option value="中国葡萄牙 +146"></option>
            </datalist>

        </label>
        <br>
        <input type="submit" value="同意并注册" id="submit">
        <div class="know">
            <h4>了解更多</h4>
            <ul>
                <li><a href="#">会员名如何设置会更好？</a></li>
                <li><a href="#">会员账户注册不成功？</a></li>
                <li><a href="#">个人账户可以开店吗？</a></li>
                <li><a href="#">注册个人资料需要准备哪些资料？</a></li>
                <li><a href="#">一个人能注册多个会员账户吗？</a></li>
                <li><a href="#">其他问题</a></li>
            </ul>
        </div>
    </form>
    <form action="#" class="main2" style="visibility: hidden;">
        <label for="">会员名：<input type="text" name="vipname" placeholder="设置会员名" required></label>
        <br>
        <label for="" style="margin-left: -16px;">登录密码：<input type="password" name="psw1" placeholder="设置你的登录密码"
                autocomplete="off" required></label>
        <br>
        <label for="" style="margin-left: -16px;">密码确认：<input type="password" name="psw2" id=""
                placeholder="请再次输入你的登录密码" autocomplete="off" required></label>
        <br>
        <label for="" style="margin-left: -26px;">
            手机号码：
            <input list="tel" style="width: 120px;"><input type="tel" name="tel" autocomplete="off" style="width: 120px;" required>
            <datalist id="tel">
                <option value="中国大陆  +98"></option>
                <option value="中国香港  +852"></option>
                <option value="中国澳门  +853"></option>
                <option value="中国西班牙 +351"></option>
                <option value="中国葡萄牙 +146"></option>
            </datalist>

        </label>
        <input type="submit" value="同意并注册" id="submit">
        <div class="know">
            <h4>了解更多</h4>
            <ul>
                <li><a href="#">会员名如何设置会更好？</a></li>
                <li><a href="#">会员账户注册不成功？</a></li>
                <li><a href="#">个人账户可以开店吗？</a></li>
                <li><a href="#">注册个人资料需要准备哪些资料？</a></li>
                <li><a href="#">一个人能注册多个会员账户吗？</a></li>
                <li><a href="#">其他问题</a></li>
            </ul>
        </div>
    </form>
</body>
<script>
    var body = document.querySelector('body');
    body.onclick = function (event) {
        var target = event.target;
        console.log(target.className);
        var main1 = document.querySelector('.main1');
        var main2 = document.querySelector('.main2');
        var firm = document.querySelector('.firm');
        var person = document.querySelector('.person');
        if (target.className == 'person') {
            main1.style.visibility = 'hidden';
            firm.style.borderBottom = 'none';
            firm.style.color = 'black';
            main2.style.visibility = 'visible';
            person.style.borderBottom = '1px solid #ff6000'
            person.style.color = '#ff6000';
        } else if (target.className == 'firm') {
            main1.style.visibility = 'visible';
            firm.style.borderBottom = '1px solid #ff6000';
            firm.style.color = '#ff6000';
            main2.style.visibility = 'hidden';
            person.style.borderBottom = 'none'
            person.style.color = 'black';
        }
    }
    var form = document.querySelector('.main1');
    console.log(form);
    var vipname = form['vipname'];
    var reg = /^[\u4e00-\u9fa5a-zA-Z]{5,25}$/;
    vipname.onchange = function(){
        var v = vipname.value;
        console.log(v);
        if(reg.test(v)){

        }else{
            alert('会员名为包含汉字，字母的5-25位字符');
        }
    }
    
</script>

</html>